<template>
  <div>
    <!-- <van-button type="primary" icon="plus" @click.native="onCreate" /> -->

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="val in data2" :key="val.id">
        <ListCell :data="val" :config="config" is-link :to="getViewPath(val)" />
      </div>
    </van-list>
  </div>
</template>

<script>
import ListCell from './ListCell'

export default {
  name: 'ListPage',
  components: { ListCell },

  props: {
    model: { type: String, default: undefined },
    toResearch: { type: Boolean, default: false },

    data: { type: Array, default: () => [] },
    config: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    return {
      isLoading: false,
      loading: false,
      finished: false,
      limit: 10,
      offset: 0
    }
  },
  computed: {
    //

    data2: {
      get() {
        return this.data
      },
      set(val) {
        this.$emit('update:data', val)
      }
    }
  },

  watch: {
    toResearch: {
      handler(newVal, oldVal) {
        // console.log('watch,toResearch, ', newVal, oldVal)
        if (!this.isLoading) {
          this.initLoad()
        }
      },
      deep: true,
      immediate: true
    }
  },

  async created() {
    //
  },

  mounted() {
    // console.log('ListPage, config,', this.config.name, this.config)
  },

  methods: {
    initLoad() {
      this.offset = 0
      this.data2 = []
      this.$emit('update:toResearch', false)
      this.loading = false
      this.finished = false
    },

    async onLoad() {
      // 异步更新数据

      const load_data = this.$parent.list_load_data

      if (load_data) {
        // console.log(' onLoad,')
        this.isLoading = true
        const res = await load_data({ limit: this.limit, offset: this.offset })
        if (this.toResearch) {
          this.initLoad()
        } else {
          this.data2 = [...this.data2, ...res]
          this.offset = this.offset + res.length
          this.loading = false
          if (res.length === 0) {
            this.finished = true
            this.isLoading = false
          }
        }
      }

      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1)
      //   }
      //   // 加载状态结束
      //   this.loading = false
      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true
      //   }
      // }, 1000)
    },

    onClick(val) {
      //
      console.log('onClick, ', val)
    },

    getViewPath(val) {
      //

      const res = {
        path: this.config.path.view,
        query: { id: val.id }
      }
      if (this.model) {
        res.query.model = this.model
      }
      // console.log('getViewPath', this.model, res)
      return res
    }

    // async onCreate() {
    //   console.log('onCreate', this.config.path)
    //   this.$router.push(this.config.path.form)
    // }
  }
}
</script>

<style type="text/css"></style>
